<template>
    <div class="box">
        <header class="header">
                 <van-search
                    placeholder="请输入搜索关键词"
                    shape="round"
                    @click="$router.push('/search')"
                >
                <template #left>
                    <van-icon @click="$router.back()" name="arrow-left" size="18"/>
                </template>
                </van-search>
        </header>
        
        <div class="content">

            <div class="left">
                        <!-- 左侧边导航栏 -->
                <van-sidebar v-model="activeKey" @change="onChange">
                        <van-sidebar-item @click="sideFn(item)" v-for="(item,index) in categoryList" :key="index" :title="item" />
                </van-sidebar>
            </div>
            <div class="right">
                <div class="banner">
                    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F48a74dc194116811b10cbc667f4324b55a6a8bc7.png&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648466225&t=52befcb788183f3aad3e84ad57811123" alt=".">
                    <!-- <p></p> -->
                </div>
                <h4>--- {{name}}  ---</h4>
                
                <van-grid :column-num='3'>
                    <van-grid-item
                    icon="gem-o"
                    :text="item.brand" 
                    v-for="(item,index) in brandList"
                    :key="index"
                    @click="sadass(item.brand)"   
                    />
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Search, Icon, Sidebar , SidebarItem } from 'vant'

import { getCategoryList , getBrandList } from "../../api/pro"
Vue.use(Search)
Vue.use(Icon)
Vue.use(Sidebar)
Vue.use(SidebarItem )


export default {
    name:'kind',
    data(){
        return{
            activeKey:0,
            categoryList:[],
            brandList:[],
            name:"手机"
        }
    },
    mounted(){
        if(this.$route.name === 'kind'){
            this.$store.state.active = 1
        }
        getCategoryList().then(res => {
            console.log(res);
            this.categoryList = res.data.data
        }),
        getBrandList({category:'手机'}).then(res => {
            console.log(res);
            this.brandList = res.data.data
        })
    },
    methods:{
        onChange(item){
            console.log(item);
        },
        sideFn(val){
            this.name = val
            console.log(val);
            
            getBrandList({category:val}).then(res => {
                console.log(res);
                this.brandList = res.data.data
            })
        },
        sadass(val){
          console.log(val);
          this.$router.push('/searchresult?keyword=' + val)
        },

       
    }
}
</script>

<style lang="stylus"  scoped>
.box{
   .content{
       width: 100%;
       display: flex;
       flex-direction: row;
       .left{
          width: 22%;
          background-color: #f7f8fa;
          .van-sidebar{
              width: 100%;
          }
       }
       .right{
             width: 78%;
            h4{
                margin: 20px  0;
                text-align: center;
                font-size: 17px;
            }
            .banner{
                margin: 0 auto;
                position: relative;
                height: 160px;
                width: 96%;
                // padding: 10px;
                border-radius: 10px;
                box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.952);
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    
                }
                p{
                    font-size: 16px;
                    color: white;
                    text-align: center;
                    line-height: 150px;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(26, 23, 23, 0.6);
                    left: 0;
                    top: 0;
                }
            }
           
       }
   }
}
/deep/.van-grid-item__text{
    
    // width: .8rem
    // white-space: nowrap
    // overflow hidden
    // text-overflow:ellipsis
}
</style>